.color-picker {
  position: relative;
}

.color-picker-wrapper {
  width: 260px;
  position: absolute;
  top: 22px;
  left: 0;
  z-index: var(--highestZIndex);
  padding: var(--padding);
  background-color: var(--white);
  border-radius: var(--borderRadius);
  border: 1px solid var(--borderColor);
}
.color-picker.top .color-picker-wrapper {
  transform: translate(0, -100%);
  left: 100%;
}
.color-picker.right .color-picker-wrapper {
  transform: translate(16px, 0);
  left: 100%;
  top: 0px;
}

.color-picker-list {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 4px;
}
.color-picker-item {
  width: 14px;
  height: 14px;
  cursor: pointer;
  border-radius: var(--borderRadius);
  border: 1px solid var(--borderColor);
}
.no-fill.color-picker-item {
  width: auto;
  padding: 0 2px;
}
.color-picker-item:hover {
  border-color: var(--primaryColor);
}
.reset {
  width: 100%;
  margin-top: var(--padding);
  background-color: var(--white);
}
